<template>
    <div class="address-list">
        <div class="address">
            <div class="single-address">
                <div class="address-content">
                    <div class="address-person">
                        <div class="address-name">{{addressList.name}}</div>
                        <div class="address-phone">{{addressList.phone |star('phone')}}</div>
                    </div>
                    <div class="address-detail">
                        收货地址：{{addressList.province + addressList.city + addressList.county + addressList.address}}
                    </div>
                </div>
                <div class="line"></div>
                <div class="address-operate">
                    <div class="address-default">
                        <div class="default">
                            <svg aria-hidden="true" class="icon-check" :class="addressList.default == 1 ? 'choose' : 'no-choose' ">
                                <use xlink:href="#icon-selected"></use>
                            </svg>
                            默认地址
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="confirm" @click="$refs.confirm.show()">确认兑换</div>
            <div class="confirm right" @click="toAddAddress">新建地址</div>
        </div>
        <confirm ref="confirm" text="是否确定兑换奖励?" @confirm="confirmEX" />
    </div>
</template>

<script>
import API from '../../request/api';
import Confirm from "../../components/common/confirm";

export default {
    components: { Confirm },
    name: "address-list",
    data() {
        return {
            addressList: {},
            checkState: false,
            defaultId: '',
            confirmText: '', //提示框显示内容
            confirmOpera: '', //提示框选择确认后的操作
            operaId: '', //选择操作的地址Id
        }
    },
    computed: {
    },
    created() {
        this.getAddressList();
    },
    methods: {
        getAddressList() {
            // 获取 地址列表
            this.request.get(API.getAddressList).then((result) => {
                this.addressList = result.list.find((value) => {
                    if (value.default == 1) {
                        return value
                    }
                });
            }).catch((err) => {
                this.$toast.fail(err);
            });
        },
        toAddAddress() {
            this.$router.push({
                name: 'lottery-add-address',
                query: this.$route.query,
            })
        },
        confirmEX() {
            this.request.post(API.lotteryCash, {
                ...this.$route.query,
                rec_id: this.addressList.id
            }).then((res) => {
                if (res) {
                    this.$toast({
                        message: '兑换成功',
                        duration: 1500
                    })
                    this.$router.go(-1)
                } else {
                    this.$toast({
                        message: '兑换失败',
                        duration: 1500
                    })
                }
            }).catch((err) => {
                console.log(err);
            });
        }
    },
    mounted() {
    }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/main.styl';

.line {
    position: relative;
    line();
    margin-top: titleMargin;
}

.address-list {
    width: vw(375);
    margin-bottom: vw(80);
    overflow-x: hidden;
}

.address {
    padding: cellPadding cellPadding 0 cellPadding;
    background-color: grayF;
    margin-bottom: smallMargin;
    height: vw(111) - cellPadding;
}

.single-address {
    width: 100%;
    margin-bottom: smallMargin;

    .address-content {
        height: vw(68) - cellPadding;

        .address-person {
            display: flex;
            justify-content: space-between;
            word-vw(word14, gray3);
            line-height: vw(19);
        }

        .address-detail {
            word-vw(word12, gray9);
            line-height: vw(16);
            margin-top: titleMargin;
        }
    }

    .address-operate {
        height: vw(41) - cellPadding;
        word-vw(word12, gray3);
        line-height: vw(16);
        display: flex;
        justify-content: space-between;
        margin-top: smallMargin;

        .address-default {
            display: flex;

            .default {
                display: flex;
                justify-items: center;

                .icon-check {
                    width: vw(15);
                    height: vw(15);
                    fill: grayE;
                    margin-right: smallMargin;
                }

                .no-choose {
                    fill: grayE;
                }

                .choose {
                    fill: main-color;
                }
            }
        }

        .address-edit {
            display: flex;

            .del {
                display: flex;
                justify-items: center;
                margin-left: middleMargin;

                .icon-del {
                    width: vw(16);
                    height: vw(16);
                    fill: gray9;
                    margin-right: titleMargin;
                }
            }

            .edit {
                display: flex;
                justify-items: center;

                .icon-edit {
                    width: vw(16);
                    height: vw(16);
                    fill: gray9;
                    margin-right: titleMargin;
                }
            }
        }
    }
}

.bottom {
    background: grayF;
    position: fixed;
    bottom: 0;
    width: vw(375);
    height: vw(60);
    line-height: vw(21);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    word-vw(word16, gray3);
    padding: smallMargin;

    .confirm {
        // btn-center()
        secondary-solid();
        justify-content: center;
    }

    .right {
        secondary-hollow();
        margin-left: vw(10);
    }
}
</style>